<template>
    <div class="common-layout">
      <el-container class="layout-container">
        <el-header class="layout-header">
          <!-- 顶部导航栏 -->
          <div class="header-content">
            <h1>AI督导师学生心理测评</h1>
            <nav-menu />
          </div>
        </el-header>
        
        <el-container>
          <el-aside width="200px" class="layout-aside">
            <!-- 侧边栏菜单 -->
            <side-menu />
          </el-aside>
          
          <el-main class="layout-main">
            <!-- 页面主要内容 -->
            <router-view v-slot="{ Component }">
              <transition name="fade" mode="out-in">
                <component :is="Component" />
              </transition>
            </router-view>
          </el-main>
        </el-container>
      </el-container>
    </div>
  </template>
  
  <script setup>
  import NavMenu from '@/components/NavMenu.vue'
  import SideMenu from '@/components/SideMenu.vue'
  </script>
  
  <style scoped>
  .common-layout {
    height: 100vh;
  }
  
  .layout-container {
    height: 100%;
  }
  
  .layout-header {
    background-color: #409EFF;
    color: white;
    display: flex;
    align-items: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
  }
  
  .header-content {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
  }
  
  .layout-aside {
    background-color: #545c64;
    color: white;
    transition: width 0.3s;
  }
  
  .layout-main {
    padding: 20px;
    background-color: #f0f2f5;
  }
  
  .fade-enter-active,
  .fade-leave-active {
    transition: opacity 0.3s ease;
  }
  
  .fade-enter-from,
  .fade-leave-to {
    opacity: 0;
  }
  </style>